<template>
    <div>
<van-nav-bar
  title="列表"
  left-text="返回"
  left-arrow
  @click-left="()=>{
    $router.back('/')
  }"
/>
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
  <van-skeleton :row="7" :loading="!ispd"/>

  <div v-for="key in list" v-if="ispd">
      <router-link :to="'/detail/'+key.goods_id">
    <van-card
    v-lazy="key.goods_big_logo"
  :price="key.goods_price"
  :title="key.goods_name"
  :thumb="key.goods_big_logo?key.goods_big_logo:'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
/>
</router-link>
  </div>
  </van-list>
</van-pull-refresh>

    </div>
</template>

<script setup>
import { ref } from "vue";
import { searchApi } from "@/api/api";
import { useRoute } from "vue-router";
const route=new useRoute()
  const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
let goodsdata=ref([])
searchApi(route.params.cat_name).then(res=>{
    console.log('detail',res);
     goodsdata.value=res.data.message.goods
})
let k=0
 const onLoad = () => {
      setTimeout(() => {
        if (refreshing.value) {
          list.value = [];
          refreshing.value = false;
        }
        k=list.value.length
        for (let i = 0; i < 7; i++) {
          list.value.push(goodsdata.value[k+i]);
          if(list.value.length >= goodsdata.value.length){
            break
          }
        }
        loading.value = false;

        if (list.value.length >= goodsdata.value.length) {
          finished.value = true;
        }
      }, 1000);
    };

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      onLoad();
    };
    let ispd=ref(false)
    setTimeout(()=>{
        ispd.value=true
    },1500)
</script>

<style lang="scss" scoped>

</style>